<template>
  <!-- 选货单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <!-- 第一行 -->

      <div class="hhh">
        <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">打包单详情</span>
        <div class="submitandcancel">
          <el-button type="primary"
                         icon="el-icon-arrow-left">上一页</el-button>
           <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
           <el-button plain
                       icon="el-icon-printer ">打印</el-button>
                        <el-button plain
                       icon="el-icon-s-order">完成</el-button>
                        <el-button plain
                       icon="el-icon-edit">编辑</el-button>
                       <el-button type="primary"
                       icon="el-icon-top-left">返回</el-button>
        </div>
        <hr>
      </div>

            <div>
        <span class="infoborder">基本信息</span>
      </div>

      <div>
        <el-descriptions style="margin-top:20px">
          <el-descriptions-item label="品类">王二狗</el-descriptions-item>
          <el-descriptions-item label="制单人">18100000000</el-descriptions-item>
          <el-descriptions-item label="制单时间">苏州市</el-descriptions-item>
          <el-descriptions-item label="单号">王二狗</el-descriptions-item>
          <el-descriptions-item label="客户">18100000000</el-descriptions-item>
          <el-descriptions-item label="成色">苏州市</el-descriptions-item>
          <el-descriptions-item label="仓库">王二狗</el-descriptions-item>
          <el-descriptions-item label="状态">18100000000</el-descriptions-item>
          <el-descriptions-item label="部门">苏州市</el-descriptions-item>
        </el-descriptions>
      </div>


    
              <div  style="height:40px;margin-top:20px">
                  <span class="infoborder">打印单信息</span>
        </div>
      <!-- 打包单展示 -->
      <el-table :data="packinginfoshow"
                style="width: 2000px"
                ref="multipleTable">

        <el-table-column prop="packingnum"
                         label="单号">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户名称">
        </el-table-column>
        <el-table-column prop="barecode"
                         label="条码"
                         width="150">
        </el-table-column>
        <el-table-column prop="client"
                         label="仓库"
                         width="150">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色"
                         width="150">
        </el-table-column>
        <el-table-column 
                        prop="weight"
                        label="重量"
                        width="150">
                         
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="150">
        </el-table-column>
        <el-table-column prop="extra_g_for_fee"
                         label="附加克工费">
        </el-table-column>
      </el-table>

              <div  style="height:40px;margin-top:20px">
                  <span class="infoborder">上游单信息</span>
        </div>

      <!-- 上游单信息显示 -->
           <el-table :data="selectorderlist"
                style="width:3000px"
                ref="multipleTable"
                tooltip-effect="dark">

        <el-table-column prop="goodsinfo"
                         label="选货单号"
                          width="250">
        </el-table-column>
        <el-table-column prop="goodsname"
                         label="产品名称"
                          width="250">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户"
                         width="200">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色"
                         width="200">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="200">
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="250">
        </el-table-column>
                <el-table-column prop="makingtime"
                         label="制单时间"
                         width="250">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
           //生成的打包信息展示
      packinginfoshow:[
                {
          id: 1,
          packingnum:"1312312",
          client: '老王',
          barecode:'13123',
          warehouse: '0220202',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
      ],



      //产品信息展示
      selectorderlist: [
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          makingtime:"2021-8-25 11:28:06"
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          makingtime:"2021-8-25 11:28:06"
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          makingtime:"2021-8-25 11:28:06"
        },
      ],
    }
  },
  methods: {
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style scoped>
.but {
  float: right;
}
.submitandcancel {
  margin-left: 1000px;
  margin-top: -13px;
}
.infoborder {
  margin-top: 10px;
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  border-color: white white white skyblue;
}
</style>
